<template>
  <div ref="box" :class="className" :style="styleObj" @touchstart="stopPropagation" @touchend="stopPropagation" @touchmove="stopPropagation" @scroll.stop="scrollHandle">
    <slot />
  </div>
</template>
<script>
export default {
  name: 'Scroll',
  props: {
    vertical: {
      type: Boolean,
      default: false
    },
    horizontal: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: 'auto'
    },
    width: {
      type: String,
      default: '100%'
    },
    hiddenBar: {
      type: Boolean,
      default: true
    },
    stop: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scrollTop: 0,
      scrollLeft: 0
    }
  },
  computed: {
    className() {
      const classList = ['scroll']
      if (this.vertical) {
        classList.push('vertical')
      }
      if (this.horizontal) {
        classList.push('horizontal')
      }
      if (this.hiddenBar) {
        classList.push('scroll-bar-hidden')
      }
      return classList
    },
    styleObj() {
      const style = {
        width: 'auto',
        height: 'auto'
      }
      this.width ? style.width = this.width : ''
      this.height ? style.height = this.height : ''
      return style
    },
    scrollBox() {
      return this.$refs.box
    }
  },
  created() {

  },
  methods: {
    scrollHandle(e) {
      this.$emit('on-scroll', e.target.scrollTop, e.target.scrollLeft, e.target.scrollTop - this.scrollTop, e.target.scrollLeft - this.scrollLeft)
      this.scrollTop = e.target.scrollTop
      this.scrollLeft = e.target.scrollLeft
    },
    stopPropagation(e) {
      if (this.stop) {
        e.stopPropagation()
      }
    },
    scrollTo(x, y) {
      this.scrollBox.scrollLeft = x
      this.scrollBox.scrollTop = y
    }
  }
}
</script>
<style lang="less">
.scroll {
  width: 100%;
}
.scroll-bar-hidden{
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}
.horizontal {
  overflow-x: auto;
}
.vertical {
  overflow-y: auto;
}
</style>
